Instituto Federal de São Paulo (IFSP) Campus Bragança Paulista/SP Análise e Desenvolvimento de Sistemas (ADS) 5o. módulo Profa. Ana Paula Müller Giancoli paulagiancoli@ifsp.edu.br

---

AULA 05 - REQUISIÇÕES HTTP

Agenda

• Requisições HTTP
• Utilizando uma API
• Criando nossa aplicação
  • Fetch API
  • O que são Promises?
  • Método map( ) do Javascript
• Defininco Rotas
  • react-route-dom
  • Criando uma aplicação para usar Rotas
  • BrowserRouter
  • Route
  • Switch
  • Link
• Perguntas

---

1. Requisições HTTP

• De acordo com React - AJAX e APIs, você pode usar qualquer biblioteca AJAX que desejar com React. Algumas populares são Axios, jQuery AJAX, e o nativo do navegador window.fetch.
• AJAX significa Asynchronous JavaScript and XML, ou JavaScript e XML Assíncronos. Ele é um conjunto de técnicas de desenvolvimento voltado para a web que permite que aplicações trabalhem de modo assíncrono, processando qualquer requisição ao servidor em segundo plano.
• O JavaScript é uma linguagem de programação.
• O XML (eXtensible Markup Language) é uma variação de linguagem de marcação no estilo do HTML.
• Enquanto o HTML é utilizado para exibir dados, o XML os armazena e transmite.
• Tanto o JavaScript quanto o XML trabalham de forma assíncrona no AJAX. Assim, qualquer aplicação que use AJAX pode enviar e receber dados do servidor sem precisar recarregar a página inteira.
• No Javascript puro, temos o fetch para efetuar as requisições HTTP. Para saber mais à respeito, consulte Mozilla.

---

2. Utilizando uma API

• Vamos consumir a API do github: https://api.github.com/users/anagiancoli/followers.
• Exemplo de um registro deste API.

• É uma API do github que exibe todos os seguidores de anagiancoli.
• é um array de objetos.
• Para visualizar organizado deste jeito, instale a extensão: Json Viewer (Chrome).
• Podemos verificar, o id, o login, a url do avatar e outras informações.
• Vamos consumir esta API dentro de nossa aplicacão React.
• Ao abrir a aplicação, vamos carregar as informações. Para isso, utilizaremos os Hooks. O useEffects() será responsável por carregar as informações da API, ao abrir a aplicação.

---

3. Criando nossa aplicação

• Lembrando que o nome (reqhttp) da aplicação não pode ter maiúsculas.
• Importando: import React, { useState, useEffect } from 'react';

npx create-react-app reqhttp

************************************************
/* Exemplo importando Hooks no arquivo App.js */
************************************************


import React, { useState, useEffect } from 'react';

3.1. Fetch API

• O fetch( ) permite que você faça solicitações HTTP semelhantes a XMLHttpRequest (XHR).
• A principal diferença é que a API Fetch usa Promises, que permite uma API mais simples e limpa, evitando o inferno de retorno de chamada e tendo que lembrar a API complexa de XMLHttpRequest.

3.2 O que são Promises?

• Ao definirmos o useEffect( ), utilizaremos uma Promise na execução do fetch( ).
• Uma Promise é um objeto que representa a eventual conclusão ou falha de uma operação assíncrona.
• Essencialmente, uma Promise é um objeto retornado para o qual você adiciona callbacks, em vez de passar callbacks para uma função.
• De acordo com Mozilla, por exemplo, em vez de uma função na versão antiga do Javascript que espera dois callbacks, e chama um deles, somente em uma eventual conclusão ou falha:

*************************************
/* Exemplo de Função no Javascript */
*************************************

function successCallback(result) {
  console.log("It succeeded with " + result);
}

function failureCallback(error) {
  console.log("It failed with " + error);
}

doSomething(successCallback, failureCallback);

• As funções modernas retornam uma Promise e então você pode adicionar seus callbacks.
• Uma variável chamada de promise que recebe a função doSomething( ).
• Após a execução da promise, as funções existentes dentro do .then( ) serão executadas.

*********************************************
/* Exemplo de Promise nas funções modernas */
*********************************************

const promise = doSomething();
promise.then(successCallback, failureCallback);

• ou ainda, simplesmente:

***********************************************************
/* Exemplo de Promise nas funções modernas simplificadas */
***********************************************************

doSomething().then(successCallback, failureCallback);

Aplicando Promises em nosso projeto.

• O fetch(url) retorna uma promise no caso de sucesso:
  • .then( (resultado) => resultado.json() ).
    • Usamos o .json( ) para converter o resultado para JSON.
    • O retorno deste (resultado) => resultado.json( ) também será uma promise:
      • .then( (resjson) => { console.log(resjson); setGithub(resjson); })

*********************************************************************
/* Exemplo do arquivo App.js com uso de Hook useEffect e Fetch API */
*********************************************************************

import './App.css';
import React, { useState, useEffect } from 'react';

function App() {

  const [github, setGithub] = useState([]);

  useEffect( () => { 

    function loadAPI() {
      let url = 'https://api.github.com/users/anagiancoli/followers';
      
      fetch(url)
        .then( (resultado) => resultado.json() )
        .then( (resjson)=> {
            console.log(resjson);
            setGithub(resjson);
        })
    }

    loadAPI();
  }, []);


  return (
    <div className="App">
      <header className="App-header">
        <strong>Seguidores Github</strong>
      </header>
    </div>
  );
}

export default App;

*******************************************
/* Exemplo do arquivo App.css modificado */
*******************************************

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.App {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.App-header {
  background-color: #282c34;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  font-size: calc(10px + 2vmin);
  color: white;
}

3.3. Método map( ) do Javascript

• Vamos modificar nossa página para exibir as informações da API.
• Vamos utilizar map( ) para varrer o array e exibir as informações desejadas.
• Após uma análise na API, vamos utilizar as chaves: id, login, avatar_url, html_url para exibir os dados do array de objetos.
• De acordo com Medium - Isac, com map é possível criar um novo array a partir do ooutro, sendo que o novo array terá o mesmo tamanho, mas o conteúdo poderá ser mapeado. O array original não se altera.

Exemplo

****************************************************************************
/* Exemplo array de pessoas com nome, sobrenome, idade, ano de nascimento */
****************************************************************************

const pessoas =
  [
    {nome: {primeiro: 'Ana', sobrenome: 'Giancoli'}, idade: 26, ano: 1995},
    {nome: {primeiro: 'Paula', sobrenome: 'Müller'}, idade: 55, ano: 1966},
    {nome: {primeiro: 'Ana Paula', sobrenome: 'Müller Giancoli'}, idade: 29, ano: 1992},
  ];

******************************************************
/* Exemplo de Função Javascript para mapear a idade */
******************************************************

function mapIdade(array) {
    const mapa = []
    for (let i = 0; i < array.length; i++) {
        mapa.push(array[i].idade)
    }
    return mapa
}

const idades = mapIdade(pessoas); // [26, 55, 29]

************************************************************
/* Exemplo utilizando o método map( ) para mapear a idade */
************************************************************

const idades = pessoas.map(element => element.idade); // [26, 55, 29]

• Adequando o arquivo App.js.

*******************************************
/* Exemplo do arquivo App.js modificado */
*******************************************

import './App.css';
import React, { useState, useEffect } from 'react';

function App() {

  const [github, setGithub] = useState([]);

  useEffect( () => { 

    function loadAPI() {
      let url = 'https://api.github.com/users/anagiancoli/followers';
      
      fetch(url)
        .then( (resultado) => resultado.json() )
        .then( (resjson)=> {
            console.log(resjson);
            setGithub(resjson);
        })
    }

    loadAPI();
  }, []);


  return (
    <div className="App">
      <header className="App-header">
        <img src={'https://github.com/anagiancoli.png'} className="capa"/>
        <strong>Seguidores de Ana Giancoli no Github</strong>
      </header>

      { github.map( (item) => {
          return(
              <article key={item.id} className="App-post">
                  <strong className="titulo">{item.login}</strong>
                  <img src={item.avatar_url} alt={item.login} className="capa"/>
                  <p className="subtitulo">{item.html_url}</p>
                  <a className="botao">Acessar</a>
              </article>
          )
      })}
    </div>
  );
}

export default App;

*******************************************
/* Exemplo do arquivo App.css modificado */
*******************************************

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.App {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.App-header {
  background-color: #282c34;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  height: 60px;
  font-size: calc(10px + 2vmin);
  color: white;
}

body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.App-post {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 300px;
  background-color: #fff;
  border-radius: 5px;
  border-width: 1px;
  margin: 8px;
  padding: 10px;
  border: 2px solid #4c89e3;
}

.titulo {
  font-size: 25px;
  margin-top: 10px;
  margin-bottom: 25px;
}

.subtitulo {
  margin: 5px;
  font-weight: bold;
  color: #23af60;
  padding: 10px 5px;
}

.capa {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.botao {
  height: 40px;
  background:none;
  border-radius: 5px;
  color: #4c89e3;
  border: 2px solid #4c89e3;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  padding: 1px 15px;
}

.botao:hover{
  background-color: #4c89e3;
  color: #fff;
}

Saída

3.4. Requisições HTTP com Axios

• De acordo com Rocketseat - Axios, Axios é um cliente HTTP baseado em Promises para fazer requisições. Pode ser utilizado tanto no navegador quando no Node.js.
• Para instalá-lo, utiliza-se a instrução:

npm install axios

3.4.1. Qual é a vantagem do Axios em relação à Fetch API ?

• O Axios é uma biblioteca que facilia as solicitações de forma que, não é necessário ficar montando a rota e a url, basta passar uma url base e ele monta a rota juntamente com esta url base.
• Consulte NPMJS - Axios para maiores informações. E leia também o artigo Rocketseat.

*********************************
/* Arquivo src/services/api.js */
*********************************


import axios from "axios";

// Pode ser algum servidor executando localmente: 
// http://localhost:3000

const api = axios.create({
  baseURL: "https://api.github.com",
});

export default api;

****************************************
/* Exemplo de um arquivo usando axios */
****************************************

import api from '../services/api'

// Buscando usuários do github

    api.get("users/anagiancoli")
      .then((response) => doSomething(response.data))
      .catch((err) => {
        console.error("ops! ocorreu um erro" + err);
     });

// Enviando um Post na rota posts com os parâmetros image, title e content
// Utilizando o método HTTP POST

const response = await api.post("posts", {image, title, content});

// DELETE - Deletando um arquivo por ID

api.delete('files', { id });

// PUT - atualizando apenas o nome

const personUpdated = await api.put(`person/${person.id}`, { name: "Ana" });

---

4. Definindo Rotas

4.1. Biblioteca react-router-dom

• Para criarmos diversas páginas, utilizaremos as rotas.
• Instalando a biblioteca React Router.
• É a biblioteca padrão de roteamento do React. js que mantém a interface do usuário em sincronia com o valor atual da URL acessada.

npm install react-router-dom

• É uma biblioteca bem interessante. É ágil pois não efetua o refresh (atualização da página).

4.2. Criando uma aplicação para usar Rotas

• Crie uma nova aplicação. Caso esteja em dúvida, consulte a DWEI5_Aula02_Introducao-ReactJS.

npx create-react-app meusite

• Vamos criar alguns arquivos que serão nossos componentes e serão utilizados como rotas.
• São eles:
  • Crie uma pasta dentro de src, com o nome components (minúsculo), e em seguida, uma pasta chamda de Header (maiúsculo), e um arquivo index.js (minúsculo).
  • Crie uma pasta dentro de src, com o nome pages, e em seguida, as subpastas:
    • Home (maiúsculo)
    • Contato (maiúsculo)
    • Sobre (maiúsculo)
    • Seguidores (maiúsculo)
    • Erro (maiúsculo)
      • um arquivo index.js (minúsculo) dentro de cada uma destas pastas. O react entende que deve carregá-lo.
  • E crie um arquivo com o nome de routes.js dentro da pasta src. Este arquivo conterá nossas rotas.

********************
/* Arquivo App.js */
********************

import './App.css';
import Routes from './routes';

function App() {
  return(
    <div>
      <Routes />
    </div>
  )
}

export default App;

• Importamos as rotas e inserimos dentro do componente funcional App para carregá-la.
• Ainda não funciona, porque precisamos criar os demais arquivos.

*********************
/* Arquivo App.css */
*********************

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.App {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.App-header {
  background-color: #282c34;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-around;
  padding: 10px;
  font-size: calc(10px + 2vmin);
  color: white;
}

/* Adicionado para a página seguidores */
.App-seguidores {
  background-color: #3ec986;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-around;
  padding: 10px;
  font-size: calc(10px + 2vmin);
  color: white;
  margin-bottom: 10px;
  margin-top: 20px;
}

body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.App-post {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 300px;
  background-color: #fff;
  border-radius: 5px;
  border-width: 1px;
  margin: 8px;
  padding: 10px;
  border: 2px solid #4c89e3;
}

.titulo {
  font-size: 25px;
  margin-top: 10px;
  margin-bottom: 25px;
}

.subtitulo {
  margin: 5px;
  font-weight: bold;
  color: #23af60;
  padding: 10px 5px;
}

.capa {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.botao {
  height: 40px;
  background:none;
  border-radius: 5px;
  color: #4c89e3;
  border: 2px solid #4c89e3;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  padding: 1px 15px;
}

.botao:hover{
  background-color: #4c89e3;
  color: #fff;
}

.formatamenu {
  background-color:#EDEDED;
  padding:0px;
  margin:0px;
}

/* Adicionado para a montagem do menu no componente Header */
#menu ul {
  padding:0px;
  margin:0px;
  list-style:none;
}

#menu ul li { display: inline; }

#menu ul li a {
  padding: 2px 10px;
  display: inline-block;

  /* visual do link */
  background-color:#EDEDED;
  color: #333;
  text-decoration: none;
  border-bottom:3px solid #EDEDED;
}

#menu ul li a:hover {
  background-color:#D6D6D6;
  color: #6D6D6D;
  border-bottom:3px solid #EA0000;
}

4.3. BrowserRouter

• É um componente responsável por informar a nossa aplicação que teremos um roteamento de componentes.
• De acordo com React Router, utilizamos as declarativas: BrowserRouter, Route e Switch.
• A declarativa BrowserRouter utiliza a API de histórico HTML5 (pushState, replaceState and the popstate event) para manter sua IU em sincronia com o URL.
• As propriedades do BrowserRouter são:
  • basename:
    • O parâmetro passado é uma string.
    • É a URL base para todos os locais. Se o seu aplicativo for servido a partir de um subdiretório em seu servidor, você desejará definir isso como o subdiretório.
    • Um nome de base formatado corretamente deve ter uma barra inicial, mas nenhuma barra final.
  • getUserConfirmation:
    • O parâmetro passado é uma função.
    • É usada para confirmar a navegação. O padrão é usar window.confirm.
  • forceRefresh:
    • O parâmetro passado é um valor booleano.
    • Se true, o roteador usará atualizações de página inteira na navegação de página. Você pode querer usar isso para imitar a maneira como um aplicativo renderizado por servidor tradicional funcionaria com atualizações de página inteira entre a navegação da página.
  • keyLength:
    • O parâmetro passado é um valor numérico.
    • O comprimento do location.key. O padrão é 6.
  • children:
    • O parâmetro passado é um nó.
    • Os elementos filhos a serem renderizados.
    • Nota:
      • No React de versão < 16, você deve usar um único elemento filho, pois um método de renderização não pode retornar mais de um elemento. *Se você precisar de mais de um elemento, pode tentar envolvê-los em um elemento extra < div>.

Exemplo:

*************
/* Exemplo */
*************

<BrowserRouter
  basename = "/meusite"
  forceRefresh = {true}
  getUserConfirmation = (message, callback) => {
    // this is the default behavior
    const allowTransition = window.confirm(message);
    callback(allowTransition);
  } 
  keyLength={6}
>

  <App />

</BrowserRouter>

*************
/* Exemplo */
*************

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <div>
      <Route exact path="/">
        <Home />
      </Route>
      <Route path="/news">
        <NewsFeed />
      </Route>
    </div>
  </BrowserRouter>,
  node
);

• Se a localização do aplicativo for / então a hierarquia da IU será algo como:

*************
/* Exemplo */
*************

<div>
  <Home />
  <!-- react-empty: 2 -->
</div>

• Se a localização do aplicativo for /news então a hierarquia da IU será algo como:

*************
/* Exemplo */
*************

<div>
  <!-- react-empty: 1 -->
  <NewsFeed />
</div>

4.4. Route

• De acordo com React Router, a declarativa Route é talvez o componente mais importante do React Router para entender e aprender a usar bem. Sua responsabilidade mais básica é renderizar alguma IU quando seu path corresponde ao URL atual.
• É um componente que associa a rota ao componente.
• Nele temos três parâmetros:
  • component, path e exact.
    • O parâmetro component recebe o componente que precisa ser exibido ao acessar a rota.
    • O parâmetro path é o caminho na URL que precisa ser acessado para mostrar o componente, definido pelo parâmetro component.
    • O parâmetro exact determina qual o componente vai ser exibido apenas se a rota for igual ao definido entre aspas, no nosso caso se for exatamente "/".
• É necessário importar a declarativa Route do react-router-dom.

4.5. Switch

• É um componente que recebe vários componentes Route e dado o caminho que for passado na URL um deles é renderizado.
• Cada Route é uma rota do nosso sistema, e devemos passar pra ele qual vai ser o caminho da url por meio de um atributo path="" e dado esse path, um outro atributo com o nosso componente que foi importado chamado component={ComponenteDoPath}
• De acordo com React Router, Switch é o único que processa uma rota exclusivamente. Em contraste, cada Route que corresponda ao local renderiza inclusive .
• É necessário importar a declarativa Switch do react-router-dom.

***************************
/* Arquivo src/routes.js */
***************************

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './pages/Home';
import Seguidores from './pages/Seguidores';
import Sobre from './pages/Sobre';
import Erro from './pages/Erro';
import Contato from './pages/Contato';
import Header from './components/Header';

const Routes = () => {
    return(
    <BrowserRouter>
        <Header />
        <Switch>
            <Route exact path="/" component={Home}/>
            <Route exact path="/seguidores" component={Seguidores}/>
            <Route exact path="/sobre" component={Sobre}/>
            <Route exact path="/contato" component={Contato}/>
            <Route path="*" component={Erro}/>
        </Switch>
    </BrowserRouter>
    )
}
export default Routes;

4.6. Link

• De acordo com React Router, fornece navegação declarativa e acessível em seu aplicativo.
• É um componente que nos permite navegar para uma tela usando um caminho em vez de um nome de tela com base nas opções de link.
• É preciso importar a declarativa Link do react-router-dom para utilizar.

********************************************
/* Arquivo src/components/Header/index.js */
********************************************

import { Link } from 'react-router-dom';

export default function Header() {
    return(  
        <div className="formatamenu">
            <nav id="menu">
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/seguidores">Seguidores</Link></li>
                    <li><Link to="/contato">Contato</Link></li>                    
                    <li><Link to="/sobre">Sobre</Link></li>
                </ul>
            </nav>
            <div className="App">
            <header className="App-header">
                <img src={'https://github.com/anagiancoli.png'} alt="" className="capa"/>
                <strong> Profa. Ana Paula Müller Giancoli</strong>
            </header>
        </div>
        </div>
    )
}

****************************************
/* Arquivo src/pages/Contato/index.js */
****************************************

export default function Contato() {
    return(
        <div className="App">
            <header className="App-seguidores">
                <strong>Entre em contato</strong>
            </header>
        </div>
    );
}

*************************************
/* Arquivo src/pages/Home/index.js */
*************************************

export default function Home() {
    return(
        <div className="App">
            <header className="App-seguidores">
                <strong>Home</strong>
            </header>
        </div>
    );
}

**************************************
/* Arquivo src/pages/Sobre/index.js */
**************************************

export default function Sobre() {
    return(
        <div className="App">
            <header className="App-seguidores">
                <strong>Sobre</strong>
            </header>
        </div>
    );
}

• Copiar da aplicação anterior (App.js) e adequar.

*******************************************
/* Arquivo src/pages/Seguidores/index.js */
*******************************************

import React, { useState, useEffect } from 'react';

export default function Seguidores() {
    const [github, setGithub] = useState([]);

  useEffect( () => { 

    function loadAPI() {
      let url = 'https://api.github.com/users/anagiancoli/followers';
      
      fetch(url)
        .then( (resultado) => resultado.json() )
        .then( (resjson)=> {
            console.log(resjson);
            setGithub(resjson);
        })
    }

    loadAPI();
  }, []);


  return (
    <div className="App">
      <header className="App-seguidores">
        <strong>Seguidores de Ana Giancoli no Github</strong>  <----- Adequar
      </header>
      { github.map( (item) => {
          return(
              <article key={item.id} className="App-post">
                  <strong className="titulo">{item.login}</strong>
                  <img src={item.avatar_url} alt={item.login} className="capa"/>
                  <p className="subtitulo">{item.html_url}</p>
                  <button className="botao">Acessar</button>
              </article>
          )
      })}
    </div>
  );
  
}

*************************************
/* Arquivo src/pages/Erro/index.js */
*************************************

export default function Erro() {
    return(
        <div className="App">
            <header className="App-seguidores">
                <strong>Página não encontrada !!</strong>
            </header>
        </div>
    );
}

---

Referências

• Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.

Perguntas

• Esclareça suas eventuais dúvidas durante as aulas.
• Ou pelo E-mail: paulagiancoli@ifsp.edu.br.
• Ou acesse Github Ana Giancoli e solicite atendimento para o componente curricular.

---

ADS - HTML5, CSS3, JS, React, AWS - 5o. módulo.
Modelo e formato elaborado por profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2021.

</div> </div>